<script setup>
import { ref, reactive } from 'vue'

const questions = ref([
  {
    id: 1,
    question: '您平时容易感到疲乏无力吗？',
    options: ['从不', '很少', '有时', '经常', '总是'],
    score: 0,
    type: 'qiXu' // 气虚质
  },
  {
    id: 2,
    question: '您容易感到手脚发凉吗？',
    options: ['从不', '很少', '有时', '经常', '总是'],
    score: 0,
    type: 'yangXu' // 阳虚质
  },
  {
    id: 3,
    question: '您是否容易口干、咽干或眼睛干涩？',
    options: ['从不', '很少', '有时', '经常', '总是'],
    score: 0,
    type: 'yinXu' // 阴虚质
  },
  {
    id: 4,
    question: '您是否容易感到胸闷、腹胀或身体发沉？',
    options: ['从不', '很少', '有时', '经常', '总是'],
    score: 0,
    type: 'tanShi' // 痰湿质
  },
  {
    id: 5,
    question: '您是否容易感到烦躁、易怒或情绪波动大？',
    options: ['从不', '很少', '有时', '经常', '总是'],
    score: 0,
    type: 'qiYu' // 气郁质
  },
  {
    id: 6,
    question: '您是否容易出现皮肤瘙痒或过敏现象？',
    options: ['从不', '很少', '有时', '经常', '总是'],
    score: 0,
    type: 'teBing' // 特禀质
  },
  {
    id: 7,
    question: '您是否容易感到口苦或口粘腻？',
    options: ['从不', '很少', '有时', '经常', '总是'],
    score: 0,
    type: 'shiRe' // 湿热质
  },
  {
    id: 8,
    question: '您是否容易有黑眼圈或面色晦暗？',
    options: ['从不', '很少', '有时', '经常', '总是'],
    score: 0,
    type: 'xueYu' // 血瘀质
  },
  {
    id: 9,
    question: '您的睡眠质量如何？',
    options: ['很好', '较好', '一般', '较差', '很差'],
    score: 0,
    type: 'pingHe' // 平和质（反向计分）
  },
  {
    id: 10,
    question: '您的消化功能如何？',
    options: ['很好', '较好', '一般', '较差', '很差'],
    score: 0,
    type: 'pingHe' // 平和质（反向计分）
  }
])

const currentQuestionIndex = ref(0)
const showResult = ref(false)
const constitutionResult = ref('')
const constitutionDesc = ref('')
const suggestions = ref({
  diet: '',
  exercise: '',
  emotion: ''
})

function selectOption(questionIndex, optionIndex) {
  // 计分：从不=0分，很少=1分，有时=2分，经常=3分，总是=4分
  // 平和质的问题采用反向计分
  if (questions.value[questionIndex].type === 'pingHe') {
    questions.value[questionIndex].score = 4 - optionIndex
  } else {
    questions.value[questionIndex].score = optionIndex
  }
  
  // 自动前进到下一题
  if (currentQuestionIndex.value < questions.value.length - 1) {
    currentQuestionIndex.value++
  } else {
    calculateResult()
  }
}

function calculateResult() {
  // 计算各体质得分
  const scores = {
    pingHe: 0, // 平和质
    qiXu: 0,   // 气虚质
    yangXu: 0, // 阳虚质
    yinXu: 0,  // 阴虚质
    tanShi: 0, // 痰湿质
    shiRe: 0,  // 湿热质
    xueYu: 0,  // 血瘀质
    qiYu: 0,   // 气郁质
    teBing: 0  // 特禀质
  }
  
  // 累加各类型得分
  questions.value.forEach(q => {
    scores[q.type] += q.score
  })
  
  // 找出得分最高的体质类型
  let maxScore = 0
  let maxType = ''
  
  for (const type in scores) {
    if (scores[type] > maxScore) {
      maxScore = scores[type]
      maxType = type
    }
  }
  
  // 设置体质结果
  switch (maxType) {
    case 'pingHe':
      constitutionResult.value = '平和质'
      constitutionDesc.value = '平和质是指阴阳气血调和，脏腑功能正常，体形匀称健壮，面色红润，精力充沛，睡眠良好，大小便正常，对外界环境适应能力较强的体质状态。'
      suggestions.value = {
        diet: '饮食宜清淡均衡，五味调和，不偏不倚。',
        exercise: '适合各种强度的运动，如太极拳、慢跑、游泳等。',
        emotion: '保持心情舒畅，避免情绪大起大落。'
      }
      break
    case 'qiXu':
      constitutionResult.value = '气虚质'
      constitutionDesc.value = '气虚质是指以元气不足为主要特征的体质状态，常表现为疲乏无力，气短懒言，容易出汗，舌淡苔白等。'
      suggestions.value = {
        diet: '宜食用补气健脾的食物，如山药、大枣、黄芪炖鸡等。',
        exercise: '适合缓和的运动，如散步、太极拳等，避免剧烈运动。',
        emotion: '保持心情舒畅，避免过度思虑和忧愁。'
      }
      break
    case 'yangXu':
      constitutionResult.value = '阳虚质'
      constitutionDesc.value = '阳虚质是指以阳气不足为主要特征的体质状态，常表现为怕冷，手脚发凉，面色苍白，喜热饮食等。'
      suggestions.value = {
        diet: '宜食用温阳补肾的食物，如羊肉、狗肉、韭菜等。',
        exercise: '适合温和的运动，如八段锦、散步等，注意保暖。',
        emotion: '保持乐观情绪，避免忧郁和恐惧。'
      }
      break
    case 'yinXu':
      constitutionResult.value = '阴虚质'
      constitutionDesc.value = '阴虚质是指以阴液亏少为主要特征的体质状态，常表现为口干咽燥，手足心热，潮热盗汗，舌红少苔等。'
      suggestions.value = {
        diet: '宜食用滋阴润燥的食物，如百合、银耳、梨等。',
        exercise: '适合柔和的运动，如太极拳、瑜伽等，避免剧烈运动。',
        emotion: '保持心态平和，避免过度兴奋和激动。'
      }
      break
    case 'tanShi':
      constitutionResult.value = '痰湿质'
      constitutionDesc.value = '痰湿质是指以体内痰湿停聚为主要特征的体质状态，常表现为体形肥胖，腹部肥满，口黏腻，苔厚腻等。'
      suggestions.value = {
        diet: '宜食用健脾祛湿的食物，如薏米、赤小豆、冬瓜等。',
        exercise: '适合有氧运动，如快走、慢跑、游泳等。',
        emotion: '保持心情舒畅，避免忧思郁结。'
      }
      break
    case 'shiRe':
      constitutionResult.value = '湿热质'
      constitutionDesc.value = '湿热质是指以体内湿热互结为主要特征的体质状态，常表现为面垢油光，口苦口粘，大便粘滞，小便短黄等。'
      suggestions.value = {
        diet: '宜食用清热祛湿的食物，如绿豆、苦瓜、冬瓜等。',
        exercise: '适合有氧运动，如游泳、慢跑等。',
        emotion: '保持心情平和，避免暴躁易怒。'
      }
      break
    case 'xueYu':
      constitutionResult.value = '血瘀质'
      constitutionDesc.value = '血瘀质是指以血行不畅为主要特征的体质状态，常表现为面色晦暗，唇色偏暗，肌肤粗糙，舌质紫暗等。'
      suggestions.value = {
        diet: '宜食用活血化瘀的食物，如红枣、桃仁、黑木耳等。',
        exercise: '适合有氧运动，如慢跑、快走、太极拳等。',
        emotion: '保持心情舒畅，避免忧郁和愤怒。'
      }
      break
    case 'qiYu':
      constitutionResult.value = '气郁质'
      constitutionDesc.value = '气郁质是指以气机郁滞为主要特征的体质状态，常表现为情绪抑郁，容易叹息，胸胁胀满，舌苔薄白等。'
      suggestions.value = {
        diet: '宜食用疏肝理气的食物，如柑橘、佛手、玫瑰花茶等。',
        exercise: '适合舒缓的运动，如太极拳、瑜伽等。',
        emotion: '学习情绪管理，避免抑郁和焦虑。'
      }
      break
    case 'teBing':
      constitutionResult.value = '特禀质'
      constitutionDesc.value = '特禀质是指以特殊体质反应为主要特征的体质状态，常表现为对某些物质或环境特别敏感，容易过敏等。'
      suggestions.value = {
        diet: '宜食用平和不刺激的食物，避免易过敏的食物。',
        exercise: '适合温和的运动，如散步、太极拳等。',
        emotion: '保持心情平和，避免情绪激动。'
      }
      break
    default:
      constitutionResult.value = '未能确定体质类型'
      constitutionDesc.value = '请咨询专业中医师进行更详细的体质辨识。'
      suggestions.value = {
        diet: '保持饮食均衡，不偏食。',
        exercise: '适量运动，不过度劳累。',
        emotion: '保持心情舒畅，避免情绪波动过大。'
      }
  }
  
  // 保存体质结果到本地存储
  uni.setStorageSync('constitutionResult', {
    type: constitutionResult.value,
    description: constitutionDesc.value,
    suggestions: suggestions.value,
    testDate: new Date().toISOString()
  })
  
  showResult.value = true
}

function backToBasicInfo() {
  uni.navigateBack()
}
</script>

<template>
  <view class="container">
    <view class="header">
      <view class="title">体质辨识</view>
      <view class="subtitle">通过回答问题，了解您的中医体质类型</view>
    </view>
    
    <view v-if="!showResult" class="question-container">
      <view class="progress-bar">
        <view 
          class="progress-inner"
          :style="{ width: `${(currentQuestionIndex + 1) / questions.length * 100}%` }"
        ></view>
      </view>
      <view class="progress-text">{{ currentQuestionIndex + 1 }}/{{ questions.length }}</view>
      
      <view class="question">
        <text class="question-text">{{ questions[currentQuestionIndex].question }}</text>
        
        <view class="options">
          <view 
            v-for="(option, index) in questions[currentQuestionIndex].options" 
            :key="index"
            class="option"
            @click="selectOption(currentQuestionIndex, index)"
          >
            <text>{{ option }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <view v-else class="result-container">
      <view class="result-header">
        <view class="result-title">体质辨识结果</view>
        <view class="result-type">{{ constitutionResult }}</view>
      </view>
      
      <view class="result-desc">
        <text>{{ constitutionDesc }}</text>
      </view>
      
      <view class="suggestions">
        <view class="suggestion-item">
          <view class="suggestion-title">饮食养生建议</view>
          <view class="suggestion-content">{{ suggestions.diet }}</view>
        </view>
        
        <view class="suggestion-item">
          <view class="suggestion-title">运动养生建议</view>
          <view class="suggestion-content">{{ suggestions.exercise }}</view>
        </view>
        
        <view class="suggestion-item">
          <view class="suggestion-title">情志养生建议</view>
          <view class="suggestion-content">{{ suggestions.emotion }}</view>
        </view>
      </view>
      
      <button class="back-btn" @click="backToBasicInfo">返回</button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  margin-bottom: 40rpx;
  
  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: #666;
  }
}

.progress-bar {
  height: 10rpx;
  background-color: #e0e0e0;
  border-radius: 10rpx;
  margin-bottom: 10rpx;
  overflow: hidden;
  
  .progress-inner {
    height: 100%;
    background-color: #4caf50;
    transition: width 0.3s;
  }
}

.progress-text {
  text-align: right;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 30rpx;
}

.question {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  
  .question-text {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 30rpx;
    display: block;
  }
}

.options {
  .option {
    padding: 20rpx;
    border: 1px solid #e0e0e0;
    border-radius: 8rpx;
    margin-bottom: 20rpx;
    font-size: 28rpx;
    color: #333;
    transition: all 0.3s;
    
    &:active {
      background-color: #e8f5e9;
      border-color: #4caf50;
    }
  }
}

.result-container {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
}

.result-header {
  text-align: center;
  margin-bottom: 30rpx;
  
  .result-title {
    font-size: 32rpx;
    color: #666;
    margin-bottom: 10rpx;
  }
  
  .result-type {
    font-size: 40rpx;
    font-weight: bold;
    color: #4caf50;
  }
}

.result-desc {
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  margin-bottom: 30rpx;
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

.suggestions {
  margin-bottom: 40rpx;
  
  .suggestion-item {
    margin-bottom: 20rpx;
    
    .suggestion-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .suggestion-content {
      font-size: 28rpx;
      color: #666;
      line-height: 1.5;
    }
  }
}

.back-btn {
  background-color: #4caf50;
  color: #fff;
  border-radius: 8rpx;
  font-size: 30rpx;
  padding: 20rpx 0;
}
</style>